import React, {useState} from 'react';
import {Button, Col, Form, Input, Row, Steps} from "antd";
import {LockOutlined, MailOutlined, UserOutlined} from "@ant-design/icons";
import {forget, sendCheckCode} from "../../util/api/SystemApi";
import {useNavigate} from "react-router-dom";

const RetrieveForm = () => {
  const navigate = useNavigate();
  const [current, setCurrent] = useState(0);
  const [userName, setUserName] = useState("");
  const [email, setEmail] = useState("");
  const [verificationCode, setVerificationCode] = useState("");
  const [form] = Form.useForm();
  const next = () => {
    form.validateFields().then(() => {
      setCurrent(current + 1);
    });
  }

  const prev = () => {
    setCurrent(current - 1);
  };

  const finish = (values) => {
    console.log({
      "userName": userName,
      "email": email,
      "verificationCode": verificationCode,
      "password": values["password"],
      "confirm": values["confirm"]
    })
    forget({
      "userName": userName,
      "email": email,
      "verificationCode": verificationCode,
      "password": values["password"],
      "confirm": values["confirm"]
    }).then(()=>{
      navigate("/login")
    })
    console.log();
  };

  const userNameHandleChange = (e) => {
    setUserName(e.target.value);
  };

  const emailHandleChange = (e) => {
    setEmail(e.target.value);
  };

  const verificationCodeHandleChange = (e) => {
    setVerificationCode(e.target.value)
  };
  // 验证邮箱
  const checkEmail = () => {
    sendCheckCode({
      "userName": userName,
      "email": email
    })
  };

  const steps = [
    {
      title: "验证身份",
      content:
        <>
          <Form.Item
            name={"userName"}
            rules={[
              {
                required: true,
                message: "请输入用户名!",
              },
              {
                whitespace: true,
                message: "不得有空格!"
              },
              {
                pattern: /^[a-zA-Z0-9_-]{4,16}$/,
                message: "用户名由字母、数组、下划线、减号组成，4-16位!"
              }
            ]}
          >
            <Input
              prefix={<UserOutlined/>}
              placeholder={"用户名"}
              value={userName}
              onChange={userNameHandleChange}
            />
          </Form.Item>
          <Form.Item
            name={"email"}
            rules={[
              {
                required: true,
                message: "请输入电子邮箱！"
              },
              {
                pattern: /[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+/,
                message: "邮箱格式不正确！"
              }
            ]}
          >
            <Input
              prefix={<MailOutlined/>}
              type={"email"}
              placeholder={"电子邮件"}
              value={email}
              onChange={emailHandleChange}
            />
          </Form.Item>
          <Form.Item
            name={"verificationCode"}
            rules={[
              {
                required: true,
                message: "请输入验证码！"
              },
              {
                pattern: /^[0-9]{6}$/,
                message: "验证码为6位数字"
              }
            ]}
          >
            <Row gutter={40}>
              <Col span={16}>
                <Input
                  placeholder={"验证码"}
                  value={verificationCode}
                  onChange={verificationCodeHandleChange}
                />
              </Col>
              <Col span={8}>
                <Button
                  type={"primary"}
                  onClick={checkEmail}
                >
                  验证邮箱
                </Button>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Button
              type={"primary"}
              htmlType={"submit"}
              onClick={() => next()}
              style={{
                width: "350px",
              }}>
              下一步
            </Button>
          </Form.Item>
        </>
    },
    {
      title: "重置密码",
      content:
        <>
          <Form.Item
            name={"password"}
            rules={[
              {
                required: true,
                message: "请输入新密码!",
              },
              {
                whitespace: true,
                message: "不得有空格!"
              },
              {
                pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
                message: "密码最少6位，至少含有大小写字母、数字和特殊字符!"
              }
            ]}
          >
            <Input
              prefix={<LockOutlined/>}
              type={"password"}
              placeholder={"密码"}
              autoComplete={"on"}
            />
          </Form.Item>
          <Form.Item
            name={"confirm"}
            rules={[
              {
                required: true,
                message: "请再次输入密码!",
              },
              ({getFieldValue}) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("你输入的两个密码不匹配！"));
                },
              }),
            ]}
          >
            <Input
              prefix={<LockOutlined/>}
              type={"password"}
              placeholder={"确定密码"}
              autoComplete={"on"}
            />
          </Form.Item>
          <Form.Item>
            <Button
              type={"primary"}
              htmlType={"submit"}
              style={{
                width: "350px",
              }}>
              确定重置
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              type={"primary"}
              onClick={() => prev()}
              style={{
                width: "350px"
              }}>
              上一步
            </Button>
          </Form.Item>
        </>
    }
  ];

  return (
    <div
      style={{
        width: "400px",
        height: "450px",
        position: "absolute",
        margin: "auto",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: "rgb(255,255,255)",
        borderRadius: "10px",
      }}>
      <div
        style={{
          width: "350px",
          height: "360px",
          position: "absolute",
          margin: "auto",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}>
        <h1><b>找回密码</b></h1>
        <div style={{
          marginTop: "30px"
        }}>
          <Steps progressDot current={current}>
            <>
              {
                steps.map((item, index) => (
                  <Steps.Step title={item.title} key={index}/>
                ))
              }
            </>
          </Steps>
        </div>
        <div style={{
          marginTop: "30px"
        }}>
          <Form
            form={form}
            onFinish={finish}
          >
            {
              steps[current].content
            }
          </Form>
        </div>
      </div>
    </div>
  );
};

export default RetrieveForm;